{% extends 'base.html' %}
{% load static %}

{% block title %}首页 - 电影院票务管理系统{% endblock %}

{% block content %}
<!-- 轮播图 -->
<div id="movieCarousel" class="carousel slide mb-5" data-bs-ride="carousel">
    <div class="carousel-indicators">
        {% for movie in movies|slice:":3" %}
            <button type="button" data-bs-target="#movieCarousel" data-bs-slide-to="{{ forloop.counter0 }}" 
                    {% if forloop.first %}class="active"{% endif %}></button>
        {% endfor %}
    </div>
    <div class="carousel-inner">
        {% for movie in movies|slice:":3" %}
            <div class="carousel-item {% if forloop.first %}active{% endif %}">
                <div class="d-block w-100" style="height: 400px; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('{% if movie.poster %}{{ movie.poster.url }}{% else %}{% static 'images/default-poster.jpg' %}{% endif %}') center/cover;">
                    <div class="carousel-caption d-none d-md-block">
                        <h2>{{ movie.title }}</h2>
                        <p>{{ movie.description|truncatewords:20 }}</p>
                        <a href="{% url 'movie_detail' movie.id %}" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#movieCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#movieCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<!-- 热门电影 -->
<section class="mb-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-fire text-danger me-2"></i>热门电影</h2>
        <a href="{% url 'movie_list' %}" class="btn btn-outline-primary">查看全部</a>
    </div>
    
    <div class="row">
        {% for movie in movies %}
            <div class="col-md-4 col-lg-2 mb-4">
                <div class="card h-100 movie-card">
                    <img src="{% if movie.poster %}{{ movie.poster.url }}{% else %}{% static 'images/default-poster.jpg' %}{% endif %}" 
                         class="card-img-top" alt="{{ movie.title }}" style="height: 300px; object-fit: cover;">
                    <div class="card-body">
                        <h6 class="card-title">{{ movie.title }}</h6>
                        <p class="card-text text-muted small">{{ movie.genre }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="badge bg-warning text-dark">
                                <i class="fas fa-star me-1"></i>{{ movie.rating }}
                            </span>
                            <span class="text-primary fw-bold">¥{{ movie.price }}</span>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent">
                        <a href="{% url 'movie_detail' movie.id %}" class="btn btn-primary btn-sm w-100">查看详情</a>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="col-12 text-center">
                <p class="text-muted">暂无电影信息</p>
            </div>
        {% endfor %}
    </div>
</section>

<!-- 即将上映 -->
{% if upcoming_movies %}
<section class="mb-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-calendar-alt text-info me-2"></i>即将上映</h2>
    </div>
    
    <div class="row">
        {% for movie in upcoming_movies %}
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card h-100 movie-card">
                    <img src="{% if movie.poster %}{{ movie.poster.url }}{% else %}{% static 'images/default-poster.jpg' %}{% endif %}" 
                         class="card-img-top" alt="{{ movie.title }}" style="height: 250px; object-fit: cover;">
                    <div class="card-body">
                        <h6 class="card-title">{{ movie.title }}</h6>
                        <p class="card-text text-muted small">{{ movie.genre }}</p>
                        <p class="card-text small">
                            <i class="fas fa-calendar me-1"></i>{{ movie.release_date|date:"Y-m-d" }}
                        </p>
                    </div>
                    <div class="card-footer bg-transparent">
                        <a href="{% url 'movie_detail' movie.id %}" class="btn btn-outline-primary btn-sm w-100">查看详情</a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</section>
{% endif %}

<!-- 快速功能 -->
<section class="mb-5">
    <div class="row">
        <div class="col-md-4 mb-3">
            <div class="card text-center h-100">
                <div class="card-body">
                    <i class="fas fa-search fa-3x text-primary mb-3"></i>
                    <h5 class="card-title">查找电影</h5>
                    <p class="card-text">浏览我们丰富的电影库，找到您喜欢的电影</p>
                    <a href="{% url 'movie_list' %}" class="btn btn-primary">开始搜索</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card text-center h-100">
                <div class="card-body">
                    <i class="fas fa-ticket-alt fa-3x text-success mb-3"></i>
                    <h5 class="card-title">在线购票</h5>
                    <p class="card-text">便捷的在线购票服务，随时随地预订座位</p>
                    {% if user.is_authenticated %}
                        <a href="{% url 'movie_list' %}" class="btn btn-success">立即购票</a>
                    {% else %}
                        <a href="{% url 'login' %}" class="btn btn-success">登录购票</a>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card text-center h-100">
                <div class="card-body">
                    <i class="fas fa-user-plus fa-3x text-info mb-3"></i>
                    <h5 class="card-title">会员服务</h5>
                    <p class="card-text">注册会员享受更多优惠和专属服务</p>
                    {% if user.is_authenticated %}
                        <a href="{% url 'profile' %}" class="btn btn-info">个人中心</a>
                    {% else %}
                        <a href="{% url 'register' %}" class="btn btn-info">立即注册</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %} 